<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #role_wrapper {
            width:calc(100% - 64px);
            padding:32px;
        }
        #add_role_form {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        .form_input_text {
            width:100%;
            border:none;
            border-bottom:1px #333 solid;
            margin-top:30px;
            outline:none;
            padding:8px;
            font-size:15px;
            color:#333;
        }
        #first_menu_select {
            width:100%;
            height:30px;
            margin-top:30px;
        }
        #second_menu_select {
            width:100%;
            height:30px;
            margin-top:30px;
        }
        #role_add_submit {
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            border-radius:5px;
            margin-top:30px;
            cursor:pointer;
        }
        #role_add_submit:hover {
            filter: brightness(110%);
        }
        .first_menu {
            width:calc(100% - 15px);
            padding:5px 0 5px 15px;
            font-size:15px;
            color:#333;
            border-bottom:1px #ccc dashed;
        }
        .second_menu {
            width:calc(100% - 30px);
            padding:5px 0 5px 30px;
            height:15px;
            font-size:12px;
            color:#333;
            line-height:15px;
        }
        .second_menu > input[type=checkbox] {
            float:left;
            width:15px;
            height:15px;
            margin-right:15px;
        }
        #menu_list {
            margin-top:30px;
        }
    </style>
</head>
<body>
    <div id="role_wrapper">
        <input type="hidden" value="${request.contextPath}" id="root" />
        <div class="wrapper_head">
            <h2>角色管理</h2>
        </div>
        <form id="add_role_form" method="post" target="rfFrame">
            <h3>添加角色: </h3>
            <input type="text" class="form_input_text" id="role_name_input" name="role_name" placeholder="角色名称..." autocomplete="off" />
            <input type="text" class="form_input_text" id="role_remark_input" name="role_remark" placeholder="角色备注..." autocomplete="off" />
            <div id="menu_list">

            </div>
            <input type="submit" name="submit" id="role_add_submit" value="添加角色" />
            <div style="clear:both"></div>
            <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
        </form>
    </div>
</body>

<script>
    getAllFirstMenu();
    function getAllFirstMenu() {
        $(".loading").css("display", "block");
        $.ajax({
            url: $("#root").val() + "/getAllFirstMenu",
            type: "post",
            async: false,
            dataType: "text",
            success: function (data) {
                if(data != "") {
                    var json = JSON.parse(data);
                    for(var j in json) {
                        $("#menu_list").append("<div class='first_menu' value='"+json[j].id+"'>"+json[j].name+"</div>");
                        var secondJson = getSecondMenu(json[j].id);
                        if(secondJson != "" || secondJson != "error") {
                            for(var sj in secondJson) {
                                $("#menu_list").append("<div class='second_menu'><input type='checkbox' name='menu_permission' value='"+secondJson[sj].menuPermission+"'/>"+secondJson[sj].name+"</div>");
                            }
                        }
                    }
                }
            }
        })
        $(".loading").css("display", "none");
    }

    function getSecondMenu(id) {
        var json;
        $.ajax({
            url: $("#root").val() + "/getSecondMenuById",
            type: "post",
            data: {id:id},
            async: false,
            dataType: "text",
            success: function (data) {
                if(data != "") {
                    json = JSON.parse(data);
                }
                return "error";
            },
            error: function(data) {
                return "error";
            }
        })
        return json;
    }

    $("#add_role_form").submit(function() {
        $(".loading").css("display", "block");
        var name = $("#role_name_input").val().trim();
        var remark = $("#role_remark_input").val().trim();
        if(name != "") {
            $.ajax({
                url: $("#root").val() + "/addRole",
                type: "post",
                async: false,
                data:$("#add_role_form").serialize(),
                dataType: "text",
                success: function (data) {
                    if(data == "success")
                        alert("角色添加成功!");
                    else
                        alert("角色添加失败!");
                },
                error: function(data) {
                    alert(data);
                    alert("角色添加失败!");
                }
            })
        }else {
            alert("角色名称不能为空!");
        }
        $(".loading").css("display", "none");
    })

</script>
</html>